import React from "react";
import { Link, useLocation } from "react-router-dom";
import { cn } from "@repo/ui/lib/utils";

export interface NavItem {
  label: string;
  href: string;
}

interface RouterNavigationProps {
  className?: string;
  items: NavItem[];
}

export const RouterNavigation: React.FC<RouterNavigationProps> = ({ className, items }) => {
  return (
    <nav className={cn("ui-header-nav", className)}>
      {items.map((item, index) => (
        <RouterNavLink key={index} {...item} />
      ))}
    </nav>
  );
};

interface RouterNavLinkProps extends NavItem {}

const RouterNavLink: React.FC<RouterNavLinkProps> = ({ label, href }) => {
  const location = useLocation();
  const isActive = location.pathname === href || (href === '/' && location.pathname === '/');

  return (
    <Link 
      to={href} 
      className={cn("ui-header-nav-link", isActive && "ui-header-nav-link-active")}
    >
      {label}
    </Link>
  );
};

export default RouterNavigation;
